<template>
  <div class="game-container">
    <canvas ref="gameCanvas" class="game-canvas"></canvas>
  </div>
</template>

<script>
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
import { GlitchPass } from 'three/examples/jsm/postprocessing/GlitchPass.js';

export default {
  name: '00element',
  mounted() {
    this.initScene();
  },
  methods: {
    initScene() {
      // 创建场景
      const scene = new THREE.Scene();

      // 创建相机
      const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      camera.position.set(10, 10, 10);
      camera.lookAt(scene.position);

      // 创建渲染器
      const renderer = new THREE.WebGLRenderer({ antialias: true });
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setClearColor(0x000000, 1);
      this.$refs.gameCanvas.appendChild(renderer.domElement);

      // 添加轨道控制器
      const controls = new OrbitControls(camera, renderer.domElement);

      // 创建元素几何体和材质
      const geometry = new THREE.SphereGeometry(1, 32, 32);
      const waterMaterial = new THREE.MeshStandardMaterial({ color: 0x0000ff });
      const fireMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000 });
      const windMaterial = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
      const earthMaterial = new THREE.MeshStandardMaterial({ color: 0x8b4513 });

      const waterSphere = new THREE.Mesh(geometry, waterMaterial);
      waterSphere.position.set(-3, 0, 0);
      scene.add(waterSphere);

      const fireSphere = new THREE.Mesh(geometry, fireMaterial);
      fireSphere.position.set(3, 0, 0);
      scene.add(fireSphere);

      const windSphere = new THREE.Mesh(geometry, windMaterial);
      windSphere.position.set(0, 0, -3);
      scene.add(windSphere);

      const earthSphere = new THREE.Mesh(geometry, earthMaterial);
      earthSphere.position.set(0, 0, 3);
      scene.add(earthSphere);

      // 添加光照
      const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
      scene.add(ambientLight);

      const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
      directionalLight.position.set(1, 1, 1);
      scene.add(directionalLight);

      // 后期处理
      const composer = new EffectComposer(renderer);
      const renderPass = new RenderPass(scene, camera);
      composer.addPass(renderPass);

      const glitchPass = new GlitchPass();
      composer.addPass(glitchPass);

      // 动画循环
      const animate = () => {
        requestAnimationFrame(animate);

        // 简单的动画示例
        waterSphere.rotation.x += 0.01;
        waterSphere.rotation.y += 0.01;

        fireSphere.rotation.x += 0.01;
        fireSphere.rotation.y += 0.01;

        windSphere.rotation.x += 0.01;
        windSphere.rotation.y += 0.01;

        earthSphere.rotation.x += 0.01;
        earthSphere.rotation.y += 0.01;

        // 渲染场景
        // renderer.render(scene, camera);
        composer.render();
      };

      animate();
    },
  },
};
</script>

<style scoped>
.game-container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.game-canvas {
  width: 100%;
  height: 100%;
}
</style>